<template>
  <view class="container">
    <view class="info-card">
      <image class="avatar" v-if="token" :src="userInfo.avatarUrl || images +'/avatar.png'" mode="widthFix"/>
      <image class="avatar" v-if="!token" :src="images +'/avatar.png'" mode="widthFix"/>
      <view class="loginBt"v-if="!token" @click="loginRed">
        点击登录
      </view>
      <div class="basic" v-if="token">
        <div class="username">{{userMsg.name || '用户名'}}
          <text class="userType"><text v-if="userMsg.membership">{{userMsg.membership+'-'}}</text>{{userMsg.roleName || '角色'}}</text>
        </div>
        <div class="userAddr" v-if="room.roomInfo">{{room.roomInfo+'-'+room.roomName}}</div>
      </div>
      <view class="userChange" v-if="userMsg.roleId==16 || userMsg.roleId==17" @click="houseMan">房屋管理
        <view class="rightArrow"></view>
      </view>
    </view>
    <block v-if="userMsg.roleId==16">
      <view class="myAppr">由我审批</view>
      <view class="myNavsMenu">
        <view class="navsAllItem" v-for="(item,index) in ownerList" :key="index" @click="myApprove(index)">
          <image class="navsAllIcon" :src="localImages +item.url"></image>
          <view class="navsAllText">
            {{item.name || '123'}}
          </view>
          <view class="navsAllCount" v-if="item.allCount>0">{{item.allCount || 1}}
          </view>
        </view>
      </view>
    </block>

    <block v-if="userMsg.roleId==17">
      <view class="myAppr">我的申请</view>
      <view class="myNavsMenu">
        <view class="navsAllItem" v-for="(item,index) in headList" :key="index" @click="myApprove(index)">
          <image class="navsAllIcon" :src="localImages +item.url"></image>
          <view class="navsAllText">
            {{item.name || '123'}}
          </view>
          <view class="navsAllCount" v-if="item.allCount>0">{{item.allCount || 1}}
          </view>
        </view>
      </view>
    </block>

    <view class="navsItem"  v-if="userMsg.roleId==16 || userMsg.roleId==17" @click="houseMem">
      <image class="navsItemIcon" :src="localImages +'/myMem.png'" mode="widthFix"></image>
      <view class="navsItemTil">成员</view>
      <view class="rightArrow"></view>
    </view>
    <view class="navsItem" @click="systemSet">
      <image class="navsItemIcon" :src="localImages +'/mySet.png'" mode="widthFix"/>
      <view class="navsItemTil">设置</view>
      <view class="rightArrowTip" v-if="formData.faceSwitch==0">未上传照片</view>
      <view class="rightArrow"></view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import config from '../../../static/config.js'
import util from '../../../static/utils/util.js'
export default {
  data () {
    return {
      images: config.images,
      localImages: config.localImages,
      headList: [
          { 'index': 1, name: '待审批', url: '/myPre.png', allCount: 0 },
          { 'index': 3, name: '已同意', url: '/myCom.png', allCount: 0 },
          { 'index': 6, name: '已拒绝', url: '/myRef.png', allCount: 0 },
      ],
      ownerList: [
          { 'index': 1, name: '待审批', url: '/myPre.png', allCount: 0 },
          { 'index': 3, name: '已同意', url: '/myCom.png', allCount: 0 },
          { 'index': 6, name: '已拒绝', url: '/myRef.png', allCount: 0 },
      ],
      headIndex: 0,//头部标题索引
      token:'',
      myInfo:'',
      room:'',
      userMsg:'',
      userInfo:'',
      formData: {
        visitorNotifySwitch:0,
        faceSwitch:-1,
      },
    }
  },
  computed: {
    // ...mapState({
    //   myInfo: state => state.user.myInfo
    // })
  },
  onLoad(){

  },
  onShow () {
    wx.showTabBar()

    var token = wx.getStorageSync('token');
    this.token=token;
    if(token){
      var userInfo = wx.getStorageSync('userInfo');
      this.userInfo=userInfo;
      var room = wx.getStorageSync('room');
      this.room=room;
      var userMsg = wx.getStorageSync('userMsg');
      this.userMsg=userMsg;
      // this.approvalList();
      util.socketTest();
      this.systemSetting();
    }else {
      // wx.redirectTo({url:'/pages/bindLogin/main'})
    }
  },
  methods: {
    myApprove(index) {
      console.warn("===goDetail",index)
      wx.navigateTo({url:'/pages/subMe/myApprove/main?index=' + index})
    },
    systemSet() {
      wx.navigateTo({url:'/pages/subMe/systemSet/main'})
    },
    houseMan() {
      wx.navigateTo({url:'/pages/subMe/houseMan/main'})
    },
    houseMem() {
      wx.navigateTo({url:'/pages/subMe/houseMem/main'})
    },
    goDetail(index) {
      console.warn("===goDetail",index)
      wx.navigateTo({url:'/pages/subMe/approve/main?index=' + index})
    },
    loginRed(){
      util.getUserProfile();
    },
    approvalList() {
      var room = this.room
      var params={
        roomId:room.roomId,
        ownerId:room.ownerId,
        projectId:room.projectId,
      }
      util.wxRequestPro('/UserServer/owner/info/approvalList',params)
      .then((res)=>{
        console.warn('approvalList',res)
        var param=res.param;
        var userMsg=this.userMsg;
        //租客不展示审批列表数字提示
        // if(userMsg.roleId==17) {
        //   var awaiteFilter=param.awaiteFilter.filter((item)=>{
        //     return item.applyId==room.ownerId;
        //   })
        //   this.headList[0].allCount=awaiteFilter.length;
        //   var approveFilter=param.approveFilter.filter((item)=>{
        //     return item.applyId==room.ownerId;
        //   })
        //   this.headList[1].allCount=approveFilter.length;
        //   var refuseFilter=param.refuseFilter.filter((item)=>{
        //     return item.applyId==room.ownerId;
        //   })
        //   this.headList[2].allCount=refuseFilter.length;
        // }

        //业主展示由我审批列表
        if(userMsg.roleId==16) {
          var awaiteFilter2=param.awaiteFilter.filter((item)=>{
            return item.applyId!=room.ownerId;
          })
          this.ownerList[0].allCount=awaiteFilter2.length;
          // var approveFilter=param.approveFilter.filter((item)=>{
          //   return item.applyId!=room.ownerId;
          // })
          // this.ownerList[1].allCount=approveFilter.length;
          // var refuseFilter=param.refuseFilter.filter((item)=>{
          //   return item.applyId!=room.ownerId;
          // })
          // this.ownerList[2].allCount=refuseFilter.length;
        }
      })
    },
    systemSetting() {
      return new Promise((resolve,reject)=>{
        var params={
          // roomId:this.room.roomId,
          }
        // util.wxRequestPro('/UserServer/owner/info/systemSetting',params)
        util.wxRequestPro('/UserServer/mini/staff/systemSetting',params)
        .then((res)=>{
          console.warn('systemSetting',res)
          var param=res.param
          this.formData=param;
        })
      })
    },
  }
}
</script>

<style lang='stylus'>
.container
  height 100vh
  background-color $background
.info-card
  position relative
  display flex
  width 100vw
  padding 16px 30rpx 30rpx 30rpx
  background-color #fff
  /* border 1px solid #f00 */
.avatar
  width 132rpx
  height 132rpx
  border-radius 50%
  margin-right 33rpx
  /* border 1px solid #666 */
.loginBt{
  position absolute
  width 140rpx
  height 50rpx
  top 50%
  margin-top -25rpx
  left 194rpx
  text-align center
  color #1086FF
  border 1px solid #1086FF
  border-radius 8rpx
}
.basic
.username
  font-size 36rpx
  line-height 66rpx
  font-weight 600
.userType
  background #0053FF
  color #fff
  font-size 26rpx
  border-radius 30rpx
  padding 6rpx 16rpx 6rpx 16rpx
.userAddr
  font-size 26rpx
  line-height 36rpx
  color #838383
  font-weight 400
.userChange
  position relative
  margin 34rpx 0rpx 0rpx auto
  padding 0rpx 30rpx 0rpx 0rpx
  color #838383
  line-height 34rpx
  white-space nowrap
  /* border 1px solid #666 */
  .rightArrow
    right 0rpx
    top 8rpx
    width 22rpx
    height 22rpx

.myAppr{
    background #fff
    color #333333
    padding 30rpx 0rpx 10rpx 30rpx
    margin 14rpx 0rpx 0rpx 0rpx
    border-bottom: 0.3px solid #D8D8D8;
}

.navsItem
  display flex
  padding: 32rpx 0rpx 32rpx 30rpx;
  margin 12rpx 0rpx 0rpx 0rpx
  background #fff
  .navsItemIcon
    display inline-block
    vertical-align middle
    width 36rpx
    height 36rpx
    font-size 32rpx
    color #030303
    /* outline 1rpx solid #00f */
  .navsItemTil
    color #333333
    font-size 30rpx
    line-height 36rpx
    margin-left 10rpx
    /* outline 1rpx solid #0f0 */
  .rightArrow
    right 40rpx
    margin-top: 6rpx;
    height: 22rpx;
    width: 22rpx;
.rightArrowTip{
  margin-left: auto;
  margin-right: 60rpx;
  color: #999999;
  line-height: 36rpx;
  /* outline 1rpx solid #0f0 */
}

.myNavsMenu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content space-between
    background #FFFFFF
    padding: 0rpx 62rpx 0rpx 62rpx;
}

.navsAllItem {
    position: relative;
    /* width: 228rpx; */
    text-align: center;
    color: #333333;
    font-size: 26rpx;
    padding: 26rpx 0rpx 26rpx 0rpx;
    /* border: 1rpx solid red; */
}

.navsAllIcon {
    width: 48rpx;
    height: 48rpx;
    /* border: 1rpx solid pink; */
}

.navsAllText {
    color: #999999;
    font-size: 28rpx;
    margin-top 8rpx
}

.navsAllCount {
    position: absolute;
    top: 10rpx;
    right: 0rpx;
    height: 34rpx;
    line-height: 34rpx;
    font-size: 24rpx;
    background: #FF6E5D;
    color: #FFFFFF;
    border-radius: 17rpx;
    padding: 0rpx 12rpx 0rpx 12rpx;
}

</style>
